<template>
  <view class="list-wrap">
    <mescroll-uni :top="220" :bottom="0" :down="downOption" @down="pullRefresh" :up="upOption" @up="pullUp">
			<view class="list">
				<view v-for="(item,index) of dataList" :key="index" class="item" @click="handleDetail(item)">
					<view class="reason">
						<view class="reason-text">{{item.leaveType === 1 ? '事' : '病'}}</view>
						<uni-badge v-if="false" text="销" type="error" class="badge"></uni-badge>
					</view>
					<view class="info-wrap">
						<view class="date">申请日期：<text>{{item.time}}</text></view>
						<view class="type">请假类型：<text>{{item.leaveType === 1 ? '事假' : '病假'}}</text></view>
						<view v-if="item.leaveDismissal" class="reject">驳回原因：<text>{{item.leaveDismissal}}</text></view>
						<view class="detail">点击查看详情</view>
					</view>
					<view class="status">{{item.leaveState === 1 ? '待审核' : item.leaveState === 2 ? '审核通过': '驳回'}}</view>
				</view>
			</view>
    </mescroll-uni>
  </view>
</template>

<script>
	import MescrollUni from "../../../components/mescroll-uni/mescroll-uni";
	import uniBadge from "@/components/uni-badge/uni-badge.vue"
	import {leaveList} from '../../../api/leave'
	import {parseTime} from '../../../utils/index'
export default {
  name: 'list',
	created() {
		// this.initList()
	},
	components: {
		MescrollUni,
		uniBadge
	},
  data() {
    return {
			downOption: {
			  use: true, // 是否启用下拉刷新; 默认true
				auto: false, // 是否在初始化完毕之后自动执行下拉刷新的回调; 默认true
			},
			upOption: {
			  auto: true, // 是否在初始化完毕之后自动执行上拉加载的回调; 默认true
			  empty: {
					tip: '暂无相关数据',
					icon: '/static/images/common/404.png'
			  }
			},
			dataList: [],
			parseTimeFuc: parseTime
    }
  },
	methods:{
		// 上拉
		async pullUp(mescroll) {
      let currentPage = mescroll.num; // 页码, 默认从1开始
      let showCount = mescroll.size; // 页长, 默认每页10条
      const res = await leaveList({currentPage,showCount})
			let curPageData = res.list
      let totalSize = res.total;
			const newCurPageData = curPageData.map((item) => {
				item.time = parseTime(item.leaveCreateTime/1000).substring(0,10)
				return item
			})
			mescroll.endBySize(curPageData.length, totalSize);
      if(mescroll.num == 1) this.dataList = []; //如果是第一页需手动置空列表
      this.dataList = this.dataList.concat(newCurPageData)
		},
		// 刷新
		pullRefresh(mescroll) {
		  mescroll.resetUpScroll();
		},
		handleDetail(item) {
			const params = {
				userName: item.userName,
				leaveCreateTime: item.leaveCreateTime/1000,
				leaveType: item.leaveType,
				leaveStartTime: item.leaveStartTime/1000,
				leaveEndTime: item.leaveEndTime,
				leaveDuration: item.leaveDuration,
				leaveContent: item.leaveContent,
				leavePhoto:  escape(item.leavePhoto),
				leaveState: item.leaveState,
				salesLeaveState: item.salesLeaveState,
				leaveId: item.leaveId,
				leaveActualTime: item.leaveActualTime
			}
			uni.navigateTo({
				url: `/pages/leave/children/detail/index?params=${JSON.stringify(params)}`,
				animationType: 'pop-in'
			})
		}
	}
}

</script>
<style lang='scss' scoped>
.list-wrap{
  width: 100%;
	.list{
		padding: 20upx;
		box-sizing: border-box;
	}
	.item{
		background:rgba(240,240,240,1);
		border-radius:20upx;
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding:20upx 30upx;
		box-sizing: border-box;
		margin-bottom: 20upx;
		overflow: hidden;
		.info-wrap{
			flex: 1;
			min-width: 0;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			font-size: 30upx;
			color:#999;
			margin-right: 24upx;
			text{
				color: #333;
			}
		}
		.status{
			font-size:30upx;
			font-weight:500;
			position: relative;
			align-self: flex-start;
			&::before{
				content: '';
				position: absolute;
				width:8upx;
				height:8upx;
				top: 50%;
				transform: translateY(-50%);
				left: -24upx;
				border-radius:50%;
			}
		}
		.reason{
			width:73upx;
			height:73upx;
			border-radius:50%;
			display: flex;
			justify-content: center;
			align-items: center;
			margin-right: 28upx;
			position: relative;
			.reason-text{
				font-size: 42upx;
				font-weight: bold;
				color: #fff;
			}
			.badge{
				position: absolute;
				top: -50%;
				right: -30%;
			}
		}
		.reject{
			width: 100%;
			text-overflow: ellipsis;
			overflow: hidden;
			white-space: nowrap;
		}
		.detail{
			font-size: 30upx;
			color: #999;
			margin-top: 20upx;
		}
		&:nth-of-type(3n+1) {
			.reason {
				background-color: #35B8EE;
			}
			.info-wrap{
				.reject{
					color: #35B8EE;
					text{
						color: #35B8EE;
					}
				}
			}
			.status{
				color: #35B8EE;
				&::before{
					background: #35B8EE;
				}
			}
		}
		&:nth-of-type(3n+2) {
			.reason {
				background-color: #5ED7A3;
			}
			.info-wrap{
				.reject{
					color: #5ED7A3;
					text{
						color: #5ED7A3;
					}
				}
			}
			.status{
				color: #5ED7A3;
				&::before{
					background: #5ED7A3;
				}
			}
		}
		&:nth-of-type(3n+3) {
			.reason {
				background-color: #F2796E;
			}
			.info-wrap{
				.reject{
					color: #F2796E
					text{
						color: #F2796E;
					}
				}
			}
			.status{
				color: #F2796E;
				&::before{
					background: #F2796E;
				}
			}
		}
		&:nth-last-of-type(1) {
			margin-bottom: 0;
		}
	}
}
</style>